import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Form, Icon, message, Spin, Table } from 'antd';
import request from '@/utils/request';

function ElementInfo(props) {
  const [loading, setLoading] = useState(false);

  // 保存每次请求回填表单值
  const [elementData, setElementData] = useState([]);

  // 当dva:fromVersionId 变化的时候进行异步请求回填表单
  useEffect(() => {
    if (props.selectForm && props.selectForm.formVersionId) {
      queryElement();
    } else {
      setElementData([]);
    }
  }, [props.selectForm]);

  const queryElement = () => {
    setElementData([]);
    setLoading(true);
    request('pmc/pcms/element/queryList', {
      data: { formVersionId: props.selectForm.formVersionId },
    }).then(res => {
      if (res && res.success == true && res.data && res.data.elementList) {
        setLoading(false);
        res.data.elementList.map(item => {
          item.children = item.properties;
        });
        setElementData(res.data.elementList);
      } else if (res && res.errMessage) {
        message.error(res.errMessage);
      } else {
        message.error('查询元素失败');
      }
    });
  };

  const customExpandIcon = props => {
    if (props.record.children) {
      if (props.expanded) {
        return (
          <span style={{ marginRight: 4 }}>
            <a
              style={{ color: 'black', marginRight: 8 }}
              onClick={e => {
                props.onExpand(props.record, e);
              }}
            >
              <Icon type="minus-square" style={{ fontSize: 16 }} />
            </a>
          </span>
        );
      }
      return (
        <span style={{ marginRight: 4 }}>
          <a
            style={{ color: 'black', marginRight: 8 }}
            onClick={e => {
              props.onExpand(props.record, e);
            }}
          >
            <Icon type="plus-square" style={{ fontSize: 16 }} />
          </a>
        </span>
      );
    }
    return <span style={{ marginRight: 4 }}>&nbsp;</span>;
  };

  const columns = [
    {
      title: '元素名称',
      dataIndex: 'elementName',
    },
    {
      title: '元素编码',
      dataIndex: 'elementCode',
    },
    {
      title: '元素类型',
      dataIndex: 'componentTypeName',
    },
    // {
    //   title: '是否全局表单元素',
    //   dataIndex: 'commonFlag',
    //   render: (text) => text === 'T' ? '是' : '否'
    // }
  ];

  return (
    <Spin spinning={loading}>
      <div style={{ margin: 16 }}>
        {/* <Button type="primary" className="margin-right"  onClick={ () => {}}>
          配置环节执行人
        </Button>
        <Button className="margin-right" >
          增加子流程执行人
        </Button>
        <Button type="primary" className="margin-right" >
          设置/取消全局元素
        </Button> */}
        <Table
          style={{ margin: '16px 0 16px 0' }}
          rowKey={record => record.elementId}
          columns={columns}
          pagination={false}
          dataSource={elementData}
          expandIcon={props => customExpandIcon(props)}
        />
      </div>
    </Spin>
  );
}
export default connect(() => {})(Form.create({})(ElementInfo));
